import React from "react";
import {inject, observer} from "mobx-react";
import {Route, withRouter} from "react-router-dom";
import {Icon, Popover, Tools, Toast} from "weaver-mobile";
import Condition from "./condition";
import {RouteLayout, TabPage} from "weaver-mobile-page";
import Detail from "./detail"
import Org from "./org"
import AccessView from "../accessView";
import {WrAlertPage, WrShow} from "../../../public";

const getLabel = Tools.getLabel;

/**
 * 考核报表
 * jiansong 2019/11/8
 */
@inject("reportStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            type: "org"
        }
        this.store = this.props.reportStore;
    }

    componentDidMount() {
        this.store.doInit();
    }

    render() {
        const {list, reportListStore, hasInit, setState, stabList, onSearchChange, getTableDatas, orgStore, showtype, updateListData} = this.store;
        return (
            <div className="workrelate-performance-report workrelate-roll">
                <WrAlertPage show={hasInit && stabList && stabList.length == 0} msg={getLabel(508557, "暂未开启任何考核周期")}/>
                <WrShow show={hasInit && stabList && stabList.length > 0}>
                    <TabPage
                        span={[2, 1]}
                        tabs={stabList}
                        btns={[
                            <Icon type="filter-o" onClick={() => {
                                this.props.history.push("/performance/report/condition")
                            }}/>,
                        ]}
                        tabProps={{
                            onTabClick: (val) => {
                                Toast.loading('Loading...', 0.5);
                                onSearchChange({type1: val.key, current: 1});
                                getTableDatas(false);
                                this.store.showtype = "detail";
                            }
                        }}
                        popover
                        popoverProps={{
                            visible: false,
                            overlay: [(<Popover.Item>{getLabel(513693, "查看下属")}</Popover.Item>), (
                                <Popover.Item>{getLabel(513687, "查看组织")}</Popover.Item>)],
                            onSelect: (key, index) => {
                                if (index == 1) {
                                    this.setState({type: "org"})
                                } else {
                                    this.setState({type: "sub"})
                                }
                                this.store.showtype = "org";
                            },
                        }}
                    />
                </WrShow>
                {showtype == "detail" && <Detail menu={this.props.menu}/>}
                {showtype == "org" && <Org type={this.state.type}/>}
                <Route
                    key="report-condition"
                    path="/performance/report/condition"
                    breadcrumbName="考核报表-搜索条件"
                    render={() => (
                        <RouteLayout>
                            <Condition/>
                        </RouteLayout>
                    )}
                />
                <Route key="report-accessView"
                       breadcrumbName="评分详情"
                       path="/performance/report/accessView"
                       render={() =>
                           <RouteLayout>
                               <div className="wm-route-layout" key="route-report-accessView">
                                   <AccessView menu={this.props.menu} updateListData={updateListData}/>
                               </div>
                           </RouteLayout>
                       }
                />
            </div>
        )
    }

}
